// 外框架构 头部 侧边菜单栏 面包屑 多标签tab页样式

// 头部
.t-layout__header {
  height: @headerHeight;
}

.t-head-menu__inner {
  height: @headerHeight;
  justify-content: space-between;
  align-items: center;
}

.t-head-menu .t-menu__logo:not(:empty) {
  height: @headerHeight;
  margin-right: 0;
}

.t-head-menu .t-menu__operations:not(:empty) {
  height: @headerHeight;
}

.t-head-menu {
  background: linear-gradient(91deg, #0f64ff 1%, #4788fe 50%, #0f64ff 99%);
  box-shadow: 0 4px 4px 0 rgb(0 41 111 / 30%);
  border-radius: 0 0 30px 30px;

  .t-menu {
    justify-content: center;
    //position: absolute;
    //left: 50%;
    //top: 50%;
    //transform: translate(-50%, -50%);
  }

  .header-menu {
    flex: none;

    .t-menu__item {
      color: white;
      padding: 0 20px;

      &.t-menu__item {
        margin-left: 50px;
      }

      &.t-is-active,
      &:hover {
        background: #216aee;
        color: #f8f9fa;
      }

      .t-icon {
        color: #fff;
      }
    }

    .t-menu__item:hover:not(.t-is-active, .t-is-opened, .t-is-disabled) {
      background: transparent;
    }
  }
}

.divide-line {
  width: 3px;
  height: 28px;
  background: #fff;
  margin-right: 64px;
}

// 侧边栏
.tdesign-starter-side-nav {
  width: @side-menu-width !important;
  border-right: 1px solid rgb(160 174 192 / 60%);
}

.tdesign-starter-side-nav-placeholder {
  flex: 1 1 @side-menu-width;
  min-width: @side-menu-width;
}

.t-default-menu.t-is-collapsed {
  width: @side-menu-collapsed-width !important;

  .menu-content {
    padding-left: 0;
    align-items: center;
  }

  .t-menu .t-menu__item {
    padding: 0;
    flex-direction: column;
    height: auto;

    .t-menu__content {
      display: block;
      margin-top: 8px;
      margin-left: 0;
    }
  }
}

.tdesign-starter-side-nav-mix-fixed {
  top: @headerHeight;
}

.t-default-menu {
  .t-default-menu__inner .t-menu {
    padding: 62px 0 16px;
  }

  .menu-content {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 33px;
  }

  .t-menu__item {
    display: flex;
    width: 100%;
    padding: 0 14px;
    align-items: center;
    justify-content: flex-start;
    background: transparent !important;

    &.t-is-active {
      .t-icon.icon-wrap {
        background: #0f64ff;

        .menu-icon {
          color: #fff;
        }
      }
    }

    &.t-is-opened {
      color: var(--td-brand-color);
    }

    .t-icon.icon-wrap {
      width: 26px;
      height: 26px;
      display: flex;
      align-items: center;
      justify-content: center;
      background: rgb(33 106 238 / 10%);
      border-radius: 5px;

      .menu-icon {
        width: 16px;
        height: 16px;
        color: #0f64ff;
      }
    }

    .t-menu__content {
      font-size: 12px;
      line-height: 18px;
    }
  }

  .t-submenu {
    width: 100%;
  }

  .t-menu__sub {
    background-color: #f0f2f4;

    .menu-content {
      gap: 0;
    }
  }

  .t-menu__sub .t-menu__item {
    width: 100%;
    box-sizing: border-box;
    padding-left: 24px;

    &.t-is-active {
      .icon-wrap {
        .menu-icon {
          color: #0f64ff;
        }
      }
    }

    .icon-wrap {
      background-color: transparent !important;

      .menu-icon {
        color: #a5b4cb;
      }
    }
  }
}

.t-menu__popup .t-menu__item {
  .icon-wrap {
    display: flex;
    align-items: center;
  }
}

.collapse-wrap {
  position: absolute;
  right: 0;
  bottom: 60px;
  width: 34px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9;
  border-radius: 10px 0 0 10px;
  border: 1px solid #a0aec0;
  border-right-color: transparent;
  cursor: pointer;

  &:hover {
    opacity: 0.8;
  }

  &.collapse {
    .icon {
      transform: rotate(180deg);
    }
  }

  .icon {
    width: 16px;
    height: 16px;
  }
}

// content内容
.tdesign-starter-layout {
  height: calc(100vh - @headerHeight);

  &::-webkit-scrollbar {
    width: 0;
  }
}

.tdesign-starter-content-layout {
  padding: 0 0 22px;
}

.t-layout,
.t-layout__direction-vertical {
  background-color: #f5f8ff;
}
